<template>
  <div class="login-container">
<!-- 头部 -->
    <van-nav-bar title="登录">
      <template #left>
        <img class="logo" src="@/assets/images/logo.png"/>
      </template>
    </van-nav-bar>
    <!-- 表单 -->
    <van-form @submit="onSubmit">
  <van-field
    v-model="formlogin.tel"
     type="tel"
    label="用户名"
    placeholder="请输入用户名"
     required
    :rules='rules.tel'
  />
  <van-field
    v-model="formlogin.pwd"
    type="password"
     required
    label="密码"
    placeholder="请输入密码"
    :rules='rules.password'
  />
  <div style="margin: 16px;">
    <van-button :disabled="isloding" :loading='isloding' loading-text="程序员拼命加载ing..." round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { Notify } from 'vant'
export default {
  // name: 'login',
  data () {
    return {
      isloding: false,
      rules: {
        tel: [
          {
            required: true,
            message: '手机号',
            trigger: 'onChange'
          }, {
            pattern: /^1[3-9]\d{9}$/,
            message: '输入正确手机号',
            trigger: 'onChange'

          }
        ],
        password: [
          {
            required: true,
            message: '密码',
            trigger: 'onChange'
          },
          {
            pattern: /^\d{6}$/,
            message: '不合法密码',
            trigger: 'onChange'
          }
        ]
      },
      formlogin: {
        tel: '13888888888',
        pwd: '246810'
      }

    }
  },
  methods: {
    ...mapActions(['loginaction']),
    async  onSubmit () {
      this.isloding = true
      try {
        await this.loginaction(this.formlogin)
        Notify({ type: 'success', message: '登陆成功' })
        this.$router.push({
          path: '/layout'
        })
      } catch (err) {
        Notify({ type: 'danger', message: '手机号验证码' })
      } finally {
        this.isloding = false
      }
    }
  }
}
</script>

<style lang='less' >
.logo {
  width: 100px;
  height: 30px;
}

/* /deep/ 就是把data-v-hash值选择器写到类名的前面 */

</style>
